<template>
    <div class="cart">
        <RouterLink to="/cart" class="curr" href="javascript:;" @click="show=false" @mousemove="show=true" @mouseleave="show=false">
            <i class="iconfont icon-cart"></i><em>2</em>
        </RouterLink>
        {{router.path}}
        <div class="layer" :class="{show: show&&router.currentRoute.value.fullPath!=='/cart'}">
            <div class="list">
                <div class="item" v-for="i in 4" :key="i">
                    <RouterLink to="">
                        <img src="https://yanxuan-item.nosdn.127.net/ead73130f3dbdb3cabe1c7b0f4fd3d28.png" alt="">
                        <div class="center">
                            <p class="name ellipsis-2">和手足干裂说拜拜 ingrams手足皲裂修复霜</p>
                            <p class="attr ellipsis">颜色：修复绿瓶 容量：150ml</p>
                        </div>
                        <div class="right">
                            <p class="price">&yen;45.00</p>
                            <p class="count">x2</p>
                        </div>
                    </RouterLink>
                    <i class="iconfont icon-close-new"></i>
                </div>
            </div>
            <div class="foot">
                <div class="total">
                    <p>共 3 件商品</p>
                    <p>&yen;135.00</p>
                </div>
                <Button type="plain" @click="router.push('/cart')">去购物车结算</Button>
            </div>
        </div>
    </div>
</template>
  <script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'
const router = useRouter()

const show = ref(false)
</script>
  <style scoped lang="scss">
  .cart {
      width: 50px;
      position: relative;
      z-index: 600;
  
      .curr {
          height: 32px;
          line-height: 32px;
          text-align: center;
          position: relative;
          display: block;
  
          .icon-cart {
              font-size: 22px;
          }
  
          em {
              font-style: normal;
              position: absolute;
              right: 0;
              top: 0;
              padding: 1px 6px;
              line-height: 1;
              background: $helpColor;
              color: #fff;
              font-size: 12px;
              border-radius: 10px;
              font-family: Arial;
          }
      }
  
    //   &:hover {
    //       .layer {
    //           opacity: 1;
    //           transform: none
    //       }
    //   }
  
      .layer {
          opacity: 0;
          transition: all .4s .2s;
          transform: translateY(-200px) scale(1, 0);
          width: 400px;
          height: 400px;
          position: absolute;
          top: 50px;
          right: 0;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
          background: #fff;
          border-radius: 4px;
          padding-top: 10px;
  
          &::before {
              content: "";
              position: absolute;
              right: 14px;
              top: -10px;
              width: 20px;
              height: 20px;
              background: #fff;
              transform: scale(0.6, 1) rotate(45deg);
              box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.1);
          }
  
          .foot {
              position: absolute;
              left: 0;
              bottom: 0;
              height: 70px;
              width: 100%;
              padding: 10px;
              display: flex;
              justify-content: space-between;
              background: #f8f8f8;
              align-items: center;
  
              .total {
                  padding-left: 10px;
                  color: #999;
  
                  p {
                      &:last-child {
                          font-size: 18px;
                          color: $priceColor;
                      }
                  }
              }
          }

          &.show{
            opacity: 1;
            transform: none;
            transition: all 0 0;
          }
      }
  
      .list {
          height: 310px;
          overflow: auto;
          padding: 0 10px;
  
          &::-webkit-scrollbar {
              width: 10px;
              height: 10px;
          }
  
          &::-webkit-scrollbar-track {
              background: #f8f8f8;
              border-radius: 2px;
          }
  
          &::-webkit-scrollbar-thumb {
              background: #eee;
              border-radius: 10px;
          }
  
          &::-webkit-scrollbar-thumb:hover {
              background: #ccc;
          }
  
          .item {
              border-bottom: 1px solid #f5f5f5;
              padding: 10px 0;
              position: relative;
  
              i {
                  position: absolute;
                  bottom: 38px;
                  right: 0;
                  opacity: 0;
                  color: #666;
                  transition: all .5s;
              }
  
              &:hover {
                  i {
                      opacity: 1;
                      cursor: pointer;
                  }
              }
  
              a {
                  display: flex;
                  align-items: center;
  
                  img {
                      height: 80px;
                      width: 80px;
                  }
  
                  .center {
                      padding: 0 10px;
                      width: 200px;
  
                      .name {
                          font-size: 16px;
                      }
  
                      .attr {
                          color: #999;
                          padding-top: 5px;
                      }
                  }
  
                  .right {
                      width: 100px;
                      padding-right: 20px;
                      text-align: center;
  
                      .price {
                          font-size: 16px;
                          color: $priceColor;
                      }
  
                      .count {
                          color: #999;
                          margin-top: 5px;
                          font-size: 16px;
                      }
                  }
              }
          }
      }
  }
  </style>